import { CardWithTitle } from "@/components/public/card/card";
import LTable from "@/components/public/lTable/lTable";
import Page from "@/components/public/page/page";
import useNavigator from "@/hooks/useNavigator";
import planListService from "@/modules/productManage/productList/plianList.service";
import { EditOutlined } from "@ant-design/icons-vue";
import { Modal } from "ant-design-vue";
import to from "await-to-js";
import { defineComponent, reactive, ref } from "vue";
import styles from "./planList.module.less";
import EditPopup from "./popup/EditPopup/EditPopup";

export default defineComponent({
  setup() {
    const navigator = useNavigator();
    const state = reactive({
      toolbar: {
        left: ["refresh",],
        right: ["filter"],
      },
      dataSource: [],
      columns: [
        {
          title: "编号",
          dataIndex: "id",
          key: "id",
          align: "center",
          width: "80px",
        },
        {
          title: "产品名称",
          dataIndex: "name",
          align: "center",
          width: "220px",
        },
        {
          title: "销售地区",
          dataIndex: "sales_area",
          align: "center",
          width: "150px",
        },
        {
          title: "承保年龄",
          dataIndex: "insure_age",
          align: "center",
          width: "150px",
        },
        {
          title: "保险期间",
          dataIndex: "insure_day",
          align: "center",
          width: "150px",
        },
        {
          title: "购买次数",
          dataIndex: "sales_num",
          align: "center",
          width: "100px",
        },
        {
          title: "是否可售",
          dataIndex: "is_use",
          align: "center",
          width: "120px",
        },
        {
          title: "状态",
          dataIndex: "status",
          align: "center",
          width: "120px",
        },
        {
          title: "是否推荐",
          dataIndex: "is_hot",
          align: "center",
          width: "120px",
        },
        {
          title: "产品价格",
          dataIndex: "product_price",
          align: "center",
          width: "80px",
        },
        {
          title: "创建时间",
          dataIndex: "create_time",
          align: "center",
          width: "180px",
        },
        {
          fixed: "right",
          title: "操作",
          dataIndex: "operation",
          align: "center",
          width: "100px",
        },
      ],
      query: {
        insuranceId: navigator.route?.query?.id || '',
      },
      loading: false,
      pagination: {
        total: 0,
        current: 1,
        pageSize: 10,
      },
    })
    // 停/开售
    const saleRow = (id: number, type: string) => {
      Modal.confirm({
        title: "提示",
        content: "确认删除?",
        onOk: async () => {
          const [err, res]: any = await to((type === 'sale' ? $service.sale : $service.stopSale)({ id }))
          if (!err) {
            await LTableRef.value.$fetchTableData();
          }
        },
      });
    }
    // 表格状态变更
    const tableChangeHandler = (pag: { pageSize: number; current: number }) => {
      state.pagination.current = pag.current;
      state.pagination.pageSize = pag.pageSize;
    };
    const LTableRef = ref(null as any);
    const $service = new planListService();
    const editPopupRef = ref(null as any);
    return () => (
      <Page>
        <CardWithTitle title="计划列表">
          <LTable
            ref={LTableRef}
            service={$service}
            toolbar={state.toolbar}
            v-model={state}
          >
            <a-table
              bordered={true}
              scroll={{ x: "max-content" }}
              dataSource={state.dataSource}
              columns={state.columns}
              pagination={state.pagination}
              loading={state.loading}
              onChange={tableChangeHandler}
              v-slots={{
                bodyCell: ({ column, record }: any) => {
                  //操作
                  if (column.dataIndex === "operation") {
                    return (
                      <div class="operation">
                        <a-button
                          type="primary"
                          size="small"
                          v-slots={{
                            icon: () => <EditOutlined />,
                          }}
                          onClick={() => {
                            editPopupRef.value.open(record)
                          }}
                        >编辑</a-button>
                        {
                          record.is_use === 1 ? (<a-button
                            type="primary"
                            danger
                            size="small"
                            onClick={() => {
                              saleRow(record.id, 'stopSale')
                            }}
                          >停售</a-button>) : (<a-button
                            type="primary"
                            size="small"
                            onClick={() => {
                              saleRow(record.id, 'sale')
                            }}
                          >开售</a-button>)
                        }
                      </div>
                    )
                  }
                  //承保年龄
                  if (column.dataIndex === "insure_age") {
                    return (
                      <div>
                        {
                          record?.insure_age?.map((item: any) => (
                            <>
                              <span>{item}</span>
                              <span v-show={record?.insure_day?.length > 1}>,</span>
                            </>
                          ))
                        }
                      </div>
                    )
                  }
                  //保险期间
                  if (column.dataIndex === "insure_day") {
                    return (
                      <div>
                        {
                          record?.insure_day?.map((item: any) => (
                            <>
                              <span>{item}</span>
                              <span v-show={record?.insure_day?.length > 1}>,</span>
                            </>
                          ))
                        }
                      </div>
                    )
                  }
                  //可售
                  if (column.dataIndex === "is_use") {
                    return record.is_use === 1 ? (
                      <div>可售</div>
                    ) : (
                      <div>停售</div>
                    );
                  }
                  //状态
                  if (column.dataIndex === "status") {
                    return record.status === 1 ? (
                      <div>上架</div>
                    ) : (
                      <div>下架</div>
                    );
                  }
                  //是否推荐
                  if (column.dataIndex === "is_hot") {
                    return record.is_hot === 0 ? (
                      <div>推荐</div>
                    ) : (
                      <div>不推荐</div>
                    );
                  }
                },
              }}
            />
          </LTable>
        </CardWithTitle>
        <EditPopup
          ref={editPopupRef}
          service={$service}
          onConfirm={() => { LTableRef.value.$fetchTableData(); }}
        />
      </Page>
    )
  }
})